<template>
  <div class="home card scroll">
    <div class="table-box" v-if="!showCreate">
      <ProTable
        ref="proTable"
        title="流程配置列表"
        highlight-current-row
        :columns="columns"
        :request-api="getFlowList"
        :pagination="true"
        :show-summary="false"
        :init-param="initParam"
        :indent="20"
        :search-col="{ xs: 1, sm: 1, md: 2, lg: 4, xl: 4 }"
      >
        <!-- 表格 header 按钮 -->
        <template #tableHeader="">
          <el-button :icon="Plus" type="primary" @click="openDialog('addOrEditFlowRef')">创建</el-button>
        </template>
        <!--Expand 表格操作---->
        <template #business="scope">
          {{ businessName(scope.row.business) }}
          <!-- <div v-if="scope.row.business.length > 0">
            <span v-for="(item, index) in scope.row.business" :key="index">{{ item.name }}<br /></span>
          </div> -->
        </template>
        <!--<v-if="thisPermission.update" -->
        <template #operation="scope">
          <el-button type="primary" link @click="openDialog('addOrEditFlowRef', scope.row)">编辑</el-button>
          <el-button type="primary" link @click="deleteAccount([scope.row])">删除</el-button>
        </template>
      </ProTable>
    </div>
    <div class="table-box box2">
      <WorkflowCreate ref="addOrEditFlowRef" @refresh="refresh" />
    </div>
  </div>
</template>

<script setup lang="ts" name="noticeManagement">
import ProTable from "@/components/ProTable/index.vue";
import { ProTableInstance, ColumnProps } from "@/components/ProTable/interface";
import { Flow } from "@/api/interface/workflow";
import { getFlowList, deleteFlow } from "@/api/modules/workflow/workflowConfig";
import { reactive, ref } from "vue";
import { Plus } from "@element-plus/icons-vue";
import { useHandleData } from "@/hooks/useHandleData";
import WorkflowCreate from "./component/workflow_create.vue";
// import { useRoute } from "vue-router";
// import { useAuthStore } from "@/stores/modules/auth";
// const route = useRoute();
// const authStore = useAuthStore();
// const thisPermission = computed(() => authStore.permissionListGet[route.name as string] || {});
// import { ElMessage } from "element-plus";
// ProTable 实例
const proTable = ref<ProTableInstance>();
const showCreate = ref(false);
// 表格配置项
const columns = reactive<ColumnProps<Flow.ResFlowList>[]>([
  { prop: "name", label: "流程名称", search: { el: "input", label: "流程名称" } },
  { prop: "business", label: "关联业务类型", search: { el: "input", label: "关联业务类型" } },
  { prop: "is_default", label: "是否默认流程", width: 250 },
  { prop: "update_by", label: "操作人", width: 250 },
  { prop: "update_at", label: "最近操作时间" },
  { prop: "operation", label: "操作", fixed: "right", width: 250 }
]);
// 如果表格需要初始化请求参数，直接定义传给 ProTable(之后每次请求都会自动带上该参数，此参数更改之后也会一直带上，改变此参数会自动刷新表格数据)
const initParam = reactive({ org_id: "" });
// 新建编辑公告
const addOrEditFlowRef = ref<InstanceType<typeof WorkflowCreate> | null>(null);
const openDialog = (ref: string, data?: Flow.ResFlowList) => {
  if (ref == "addOrEditFlowRef") addOrEditFlowRef.value?.openDialog(data);
  showCreate.value = true;
};
// 删除公告
const deleteAccount = async (params: any[]) => {
  const toDoList: string[] = [];
  const notToDoList: string[] = [];
  const ids: number[] = params.map(item => {
    if (item.id) {
      toDoList.push(item.name);
    } else {
      notToDoList.push(item.name);
    }
    return item.id;
  });
  await useHandleData(deleteFlow, { ids: ids }, ["删除", "流程"], toDoList, notToDoList);
  proTable.value?.getTableList();
};

const refresh = () => {
  showCreate.value = false;
  proTable.value?.getTableList();
};

const businessName = (data: any) => {
  return data.map((item: any) => item.name).join(",");
};
</script>

<style lang="scss" scoped>
.home {
  position: relative;
  width: 100%;
  height: 100%;
}
.table-box {
  position: relative;
  z-index: 3;
  width: 100%;
}
.box2 {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}
.linkCls {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #409eff;
  vertical-align: middle;
  cursor: pointer;
}
</style>
